<!DOCTYPE html>
<html>
	<head>
    <meta charset="utf-8" />
    <title>在线矛盾纠纷多元化解平台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="apple-mobile-web-app-status-bar-style" content="yes" />
    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon" />
    <link rel="stylesheet" href="css/mobile-angular-ui-hover.min.css" />
    <link rel="stylesheet" href="css/mobile-angular-ui-base.min.css" />
    <link rel="stylesheet" href="css/mobile-angular-ui-desktop.min.css" />
    <link rel="stylesheet" href="style.css">
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/mobile-angular-ui.min.js"></script>
    <script src="js/mobile-angular-ui.gestures.min.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <style>
    	.common .c_head{
    		    position: relative;
    overflow: hidden;
    	}
   		.common .head img.back_p{
   			       max-width: 120%;
    position: absolute;
    bottom: -40px;
		   
   		}
   	.c_head ul{
   		margin: 0px;
   		padding: 0px;
   		width: 100%;
   		position: absolute;
   		bottom: 4px;
   	}
   	.c_head ul li{
   		list-style: none;
   		float: left;
   		width: 33%;
   		text-align: center;
   		color: #fff;
   		font-size: 18px;
   	}
   	.c_head ul li span{
   		padding: 10px;
   	}
   	.c_head ul li span.active{
   		border-bottom: 4px solid #fff;
   		padding: 0 10px;
   	}
   	.common .box{
   		     width: 100%;
		    /* height: 100%; */
		   /* border: 1px solid red;*/
		    /* margin: 0 auto; */
		    position: absolute;
		    overflow: hidden;
		    bottom: 0px;
		    top: 25%;
   	}
   	.box .unit{
		transition:width 2s;
		-moz-transition:width 2s; /* Firefox 4 */
		-webkit-transition:width 2s; /* Safari and Chrome */
		-o-transition:width 2s; /* Opera */
		display: none;
		border-radius:10px ;
		transition: all 1s;
		border:1px solid #ccc;
		overflow: hidden;
	}
		   	
   	
   	.box .active{
	    display: block;
    border:1px solid #ccc;
    position: absolute;
    top: 50px;
    /* left: 60px; */
    /* right: 60px; */
    bottom: 20px;
    width: 70%;
    left: 15%;
}
.box .left{
	    display: block;
   border:1px solid #ccc;
    position: absolute;
    top: 50px;
    /* left: 0px; */
    /* right: 268px; */
    bottom: 40px;
    width: 70%;
    right: 90%;
}
.box .right{
	display: block;
    border:1px solid #ccc;
    position: absolute;
    right: 88%;
    left: 90%;
    right: 60px;
    bottom: 40px;
    width: 70%;
    top: 50px;
}
.box .one img.back_1{
	    position: absolute;
    top: -20px;
    min-width: 105%;
	
}
.box .one form{
	    margin-top: 60px;
}

.ul{
	position: absolute;
	bottom: 10px;
	left: 20%;
	
}
.ul .li{
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background: red;
	float: left;
	margin-left:20px;
	    cursor: pointer;
}

   	
   	
   	
    </style>
    
    
</head>
	<body>
		<div class="common">
			<div class="head c_head">
		  		<div class="title">
		  			<img class="return" src="img/return.png" />
		  			<span>常见问题</span>
		  			
		  		</div>
		  		<ul>
		  			<li>
		  				<span class="active">咨询信息</span>
		  				
		  			</li>
		  			<li>
		  				<span>纠纷详情</span>
		  				
		  			</li>
		  			<li>
		  				<span>申请人资料</span>
		  				
		  			</li>
		  		</ul>
  	  			<img class="back_p" src="img/back_p.png"/>
  			</div>
			
			<div class="box">
				<div class="test">
					<div class="unit one active">
						<img class="back_1" src="img/back_1.png" />
						<form>
							 <div class="form-group col-xs-offset-1 col-xs-10">
							    <label for="area">
							    	<img src="img/dingwei.png" />
							    	事件地点</label>
							    <input type="text" class="form-control" id="area" placeholder="杭州西湖区">
							  </div>
							 <div class="form-group col-xs-offset-1 col-xs-10"">
							    <label for="area">
							    	<img src="img/3.png" />
							    	纠纷类型</label>
							    <input type="text" class="form-control" id="area" placeholder="">
							  </div>
							  <div class="form-group col-xs-offset-1 col-xs-10"">
							    <label for="area">
							    	<img src="img/2.png" />
							    	咨询类型</label>
							    <input type="text" class="form-control" id="area" placeholder="">
							  </div>
						</form>
						
						
					</div>
					<div class="unit right">222</div>
					<div class="unit ">333</div>
					<div class="unit ">444</div>
					<div class="unit">555</div>
				</div>
				<div class="ul">
					<!--<div class="li" id="left">11</div>-->
					
					<img class="li" id="left" src="img/left.png" />
					<!--<div class="li" id="right">22</div>-->
					<img class="li" id="right" src="img/right.png" />
					<div class="li">33</div>
				</div>
			</div>
			
			
			
			
			
			
		</div>
		
	<script type="text/javascript">
	$(function(){
		
		 $("#left").click(function(){
		 	var active = $(".unit.active");
	   		var pre = $('.unit.active').prev();
	   		var clazz = pre.attr("class")
	  		if(pre && clazz && clazz.indexOf("unit")>=0){
	  			active.next().removeClass("right");
	  			active.removeClass("active").addClass("right");
	  			active.prev().removeClass("left").addClass("active");
	  			active.prev().prev().addClass("left");
	  			
	  			
	  		}
	  	});
	  	
	  	
	  	$("#right").click(function(){
	  		var active = $('.unit.active');
	  	 	var next = $('.unit.active').next();
	  	 	var clazz = next.attr("class");
	  	 	console.log(active.text())
	  	 	if (next && clazz && clazz.indexOf("unit")>=0) {
	  	 		active.prev().removeClass("left");
	  	 		active.removeClass("active").addClass("left");
	  	 		active.next().removeClass("right").addClass("active");
	  	 		active.next().next().addClass("right");
	  	 	} 
	  	})
	
		
		
	});
	
</script>
	
		
	</body>
</html>
